<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layouts/master(title='学生列表')">   <!--layout文件路径-->
<th:block th:fragment="css">
    <!--如果没有内容，请保持-->
    <style>
        /* 标题居中 */
        h1 {
            text-align: center;
        }
        #searchForm {
            text-align: center; /* 将表单内容居中 */
            margin-bottom: 30px; /* 设置底部边距 */
            margin-top: 50px; /* 设置底部边距 */
        }
        /* 覆盖Bootstrap的表格样式 */
        .table.table-striped {
            margin:0 auto;
            border-collapse: collapse; /* 合并边框 */
            width: 80%; /* 调整表格宽度 */
            /*border: 1px solid #8d8b8b; !* 设置整个表格的边框 *!*/
        }
        .table.table-striped th,
        .table.table-striped td {
            padding: 8px; /* 添加内边距 */
            text-align: left; /* 文字居左 */
        }
        /* 调整第一列宽度 */
        .table.table-striped th:first-child,
        .table.table-striped td:first-child {
            width: 20%; /* 设置第一列宽度 */
        }
    </style>
</th:block>

<div th:fragment="content">
    <h1>学生列表</h1>
    <div class="row">
        <!-- 添加表单 -->
        <form id="searchForm">
            <input type="text" id="name" name="name" placeholder="输入姓名查询学生信息"/>
            <button type="submit">查询</button>
        </form>
        <table class="table table-striped"  >
            <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Password</th>
                <th>Sex</th>
                <th>Age</th>
                <th>Score</th>
            </tr>
            </thead>
            <tbody id="students">

            </tbody>
        </table>
    </div>


</div>
<div th:fragment="scripts">
    <!--如果没有内容，请保持-->
    <script type="text/javascript" src="/pagejs/student/list.js"></script>
</div>

</html>

